import React from 'react';
import styles from './App.module.less';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import classnames from 'classnames';

class Header extends React.Component {
  state = {
    change1:true,
  }
  handleSubmit = (e: any) => {
    e.preventDefault();
    this.props.form.validateFields((err: any, values: any) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  changeClick= (e: any) => {
    this.setState({
      change1: !this.state.change1,
    })
  }
  render(){
    const { getFieldDecorator } = this.props.form;
    const { change1 } = this.state
    console.log('this.state.change1',this.state.change1);
    return (
      <>
      <div className={styles.body}></div>
      <div className={styles.container}>
         <div className={styles.containerForm}>
            {/* 登陆 */}
            <div className={styles.containerSignin}>
              <Form onSubmit={this.handleSubmit} className={styles.loginform}>
                <Form.Item>
                  {getFieldDecorator('username', {
                    rules: [{ required: true, message: 'Please input your username!' }],
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="Username"
                    />,
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: 'Please input your Password!' }],
                  })(
                    <Input
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      type="password"
                      placeholder="Password"
                    />,
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true,
                  })(<Checkbox>Remember me</Checkbox>)}
                  <a className={styles.loginformforgot} href="">
                    Forgot password
                  </a>
                  <Button type="primary" htmlType="submit" className={styles.loginformbutton}>
                    Log in
                  </Button>
                   <a href=""> please lgin in now!</a>
                </Form.Item>
              </Form>
            </div>
            {/* 注册 */}
            <div className={classnames(styles.containerSignup, {[styles.panelActive]: !change1})}>
              <Form onSubmit={this.handleSubmit} className={styles.loginform}>
                <Form.Item>
                  {getFieldDecorator('username', {
                    rules: [{ required: true, message: 'Please input your username!' }],
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="Username"
                    />,
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: 'Please input your Password!' }],
                  })(
                    <Input
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      type="password"
                      placeholder="Password"
                    />,
                  )}
                </Form.Item>
                <Form.Item>
                  {getFieldDecorator('remember', {
                    valuePropName: 'checked',
                    initialValue: true,
                  })(<Checkbox>Remember me</Checkbox>)}
                  <a className={styles.loginformforgot} href="">
                    have any questions?
                  </a>
                  <Button type="primary" htmlType="submit" className={styles.loginformbutton}>
                    Sign in
                  </Button>
                </Form.Item>
              </Form>
            </div>
         </div>
            {/* 叠加 */}
          <div className={classnames(styles.containerOverlay,{[styles.panelActive]: !change1})}>
              <div className={classnames(styles.overlay,{[styles.panelActive]: !change1})}>
                <div  onClick ={() => this.changeClick} className={classnames( styles.overlayP,{[styles.overlaLeft]:change1})}>
                  <Button className={styles.button2} type="primary" onClick ={(e) => this.changeClick(e)}> SWITCH TO&nbsp;&nbsp;LOGIN IN</Button></div>
                <div onClick ={() => this.changeClick} 
                className={classnames( styles.overlayP,{[styles.overlayRight]:true},)}>
                  <Button className={styles.button1} type="primary" onClick ={(e) => this.changeClick(e)}>SWITCH TO &nbsp;&nbsp;
                  SIGN IN</Button>
                  </div>
              </div>
            </div>
        </div>
      </>
    )
  }
}
export default Form.create({
  name: 'normal_login',
})(Header)

